<template>
  <div class="staDisasterListWrap">
    <van-nav-bar
      v-if="!Earlywarningstatistics"
      title="山西预警统计"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="staDistime" v-if="!Earlywarningstatistics">
      <img
        style="z-index: 999;  width: 15px;height: 15px; position: absolute; left:50px;top: 15px;"
        src="../assets/On-sitedisaster/rili.png"
        alt=""
      />
      <div class="suntime">
        <span @click="selectTimeMet('start')">{{
          startTime | filterTime
        }}</span>
        ---
        <span @click="selectTimeMet('end')">{{ endTime | filterTime }}</span>
      </div>
    </div>
    <div class="tableHeader" v-if="!Earlywarningstatistics">
      <div class="thList">
        <span>地区</span>
      </div>
      <div class="thList">
        <span>类别</span>
      </div>
      <div class="thList">
        <span>总计</span>
      </div>
      <div class="thList thListColor thListColorRed">
        <span>红</span>
      </div>
      <div class="thList thListColor thListColorChen">
        <span>橙</span>
      </div>
      <div class="thList thListColor thListColorYellow">
        <span>黄</span>
      </div>
      <div class="thList thListColor thListColorBlue">
        <span>蓝</span>
      </div>
    </div>
    <div class="tableBody" v-if="!Earlywarningstatistics">
      <div
        class="tableDate"
        v-for="(item, index) in alarmList"
        v-show="item.city"
        :key="index"
      >
        <div
          v-if="showType == 0"
          class="tdList"
          :class="{ hasChild: item.hasChild }"
        >
          <span @click="addChildList(item, index)">{{
            item.city == '无' ? item.province : item.city
          }}</span>
        </div>

        <div v-if="showType == 1" class="tdList">
          <span> {{ item.cnty == '无' ? item.city : item.cnty }}</span>
        </div>
        <div class="tdList">
          <span>全部</span>
        </div>
        <div
          @click="addChildList2(item, index, '')"
          :class="showType == 1 ? 'tdList hasChild' : 'tdList'"
        >
          <span>{{
            Number(item.blue) +
              Number(item.yellow) +
              Number(item.red) +
              Number(item.orange)
          }}</span>
        </div>
        <div
          :class="
            showType == 1
              ? 'tdList tdListColor tdListColorRed hasChild'
              : 'tdList tdListColor tdListColorRed'
          "
          @click="addChildList2(item, index, 'red')"
        >
          <span>{{ Number(item.red) }}</span>
        </div>
        <div
          :class="
            showType == 1
              ? 'tdList tdListColor tdListColorRed hasChild'
              : 'tdList tdListColor tdListColorRed'
          "
          @click="addChildList2(item, index, 'orange')"
        >
          <span>{{ Number(item.orange) }}</span>
        </div>
        <div
          :class="
            showType == 1
              ? 'tdList tdListColor tdListColorRed hasChild'
              : 'tdList tdListColor tdListColorRed'
          "
          @click="addChildList2(item, index, 'yellow')"
        >
          <span>{{ Number(item.yellow) }}</span>
        </div>
        <div
          :class="
            showType == 1
              ? 'tdList tdListColor tdListColorRed hasChild'
              : 'tdList tdListColor tdListColorRed'
          "
          @click="addChildList2(item, index, 'blue')"
        >
          <span>{{ Number(item.blue) }}</span>
        </div>
      </div>
      <div v-if="noData" class="noData"><span>暂无更多数据</span></div>
    </div>
    <!--时间选择器-->
    <van-popup
      v-model="selectTime"
      get-container="body"
      position="bottom"
      :style="{ width: '100%', height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        @cancel="selectTime = false"
        @confirm="confirmTime"
        type="date"
        title="选择年月日"
        :max-date="maxDate"
      />
    </van-popup>
    <Earlywarningstatistics
      v-if="Earlywarningstatistics"
      :listData="listData"
      @goback="Earlywarningstatistics = false"
    ></Earlywarningstatistics>
    <!-- <img style="width:100%;" src="../assets/staDisasterList.jpg" alt=""> -->
  </div>
</template>
<script type="text/javascript">
import meteoroDisasterWarningApi from '@/service/disasterWarning.js'
import Earlywarningstatistics from '../page/Earlywarningstatistics.vue'
export default {
  data() {
    return {
      index: 0,
      alarminfo: {},
      alarmList: [],
      showType: 0,
      startTime: '2023-01-01',
      endTime: '',
      timeType: '',
      selectTime: false,
      currentDate: new Date(),
      maxDate: new Date(),
      timeType: '',
      noData: false,
      dianji: false,
      cityitem: '',
      history: '',
      listData: [],
      Earlywarningstatistics: false,
    }
  },
  mounted() {
    this.history = this.$route.params.text
    if (this.history == '预警历史') {
      this.startTime = this.$util.getTime1('qi')
    
    } else {
      this.startTime = this.$util.getBeforeDay('-1', 'ymd')
    }
    this.endTime = this.$util.getTime('', 'ymd')

    this.initApi(this.history)
  },
  watch: {},
  components: {
    Earlywarningstatistics,
  },
  methods: {
    onClickLeft() {
      if (this.showType == 1) {
        this.showType = 0
        // this.endTime = this.$util.getTime('', 'ymd')

        // this.startTime = this.$util.getBeforeDay('-1', 'ymd')
        if (this.history == '预警历史') {
          //   this.startTime = this.$util.getTime1('qi')
          //   this.endTime = this.$util.getTime('', 'ymd')
          this.initApi(this.history)
        } else {
          //   this.startTime = this.$util.getBeforeDay('-1', 'ymd')
          //   this.endTime = this.$util.getTime('', 'ymd')
          this.initApi()
        }
      } else {
        this.$router.go(-1)
      }
    },
    getDateStr(AddDayCount) {
      var dd = new Date()
      dd.setDate(dd.getDate() + AddDayCount) //获取AddDayCount天后的日期
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1 //获取当前月份的日期

      var d = dd.getDate()
      d = d < 10 ? '0' + d : d
      var h = dd.getHours()
      h = h < 10 ? '0' + h : h
      var minute = dd.getMinutes()
      var second = dd.getSeconds()
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      return (
        y +
        '-' +
        (m < 10 ? '0' + m : m) +
        '-' +
        d +
        ' ' +
        h +
        ':' +
        minute +
        ':' +
        second
      )
    },
    onClickRight() {},
    initApi(history) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
      })

      if (history == '预警历史') {
        var params = {
          startTime: this.startTime + ' ' + this.$util.getTime('', 'hms'),
          endTime: this.endTime + ' ' + this.$util.getTime('', 'hms'),
        }
      } else {
        var params = {
          startTime: this.startTime + ' ' + this.$util.getTime('', 'hms'),
          endTime: this.endTime + ' ' + this.$util.getTime('', 'hms'),
        }
      }

      meteoroDisasterWarningApi
        .get_tb_alarm_alarmCount(params)
        .then((res) => {
          this.showType = 0
          this.alarminfo = res

          if (res.city.length != 0) {
            this.noData = false
            this.alarmList = [
              ...this.alarminfo.province,
              ...this.alarminfo.city,
            ]

            let cntyList = []

            this.alarminfo.cnty.forEach((item) => {
              cntyList.push(item.city)
            })
            let singleCntyList = this.$util.ArrayUniq(cntyList)
            for (let j = 0; j < this.alarmList.length; j++) {
              let ararmItem = this.alarmList[j]
              if (ararmItem.city && singleCntyList.includes(ararmItem.city)) {
                ararmItem.hasChild = true
              } else {
                ararmItem.hasChild = false
              }
            }
          } else {
            this.alarmList = []
            this.noData = true
          }

          this.$toast.clear()
        })
        .catch((error) => {
          this.$toast.clear()
          this.noData = true
        })
    },
    addChildList(item, index) {
      this.cityitem = item
      if (!item.hasChild) {
        return
      }
      this.dianji = !this.dianji
      this.showType = 1
      this.alarmList = []
      this.alarminfo.cnty.forEach((secItem) => {
        if (secItem.city == item.city) {
          this.alarmList.push(secItem)
        }
      })
      if (this.alarmList[0].city == '无' && this.alarmList[0].cnty == '无') {
        this.alarmList[0].cnty = '山西省'
      }
    },
    addChildList2(item, index, color) {
      var cnty = item.cnty
      if (cnty == '无') {
        cnty = '无'
      }

      var params = {
        startTime: this.startTime + ' ' + this.$util.getTime('', 'hms'),
        endTime: this.endTime + ' ' + this.$util.getTime('', 'hms'),
        city: item.city,
        cnty: cnty,
        alarmSeverity: color,
      }

      meteoroDisasterWarningApi
        .Viewthedata(params)
        .then((res) => {
          res = this.$util.getDwType(res)

          this.listData = res
          this.Earlywarningstatistics = true
        })
        .catch((error) => {})
    },
    backCityMet() {
      this.showType = 0
      this.alarmList = []
      this.alarmList = [...this.alarminfo.province, ...this.alarminfo.city]
    },
    selectTimeMet(type) {
      this.timeType = type
      this.selectTime = true
    },
    confirmTime(value) {
      if (this.timeType == 'start') {
        if (
          new Date(this.$util.getTime(this.currentDate, 'ymd')).getTime() >
          new Date(this.endTime).getTime()
        ) {
          this.$toast('开始时间不能大于结束时间')
          return
        }
        this.startTime = this.$util.getTime(this.currentDate, 'ymd')
      } else if (this.timeType == 'end') {
        if (
          new Date(this.startTime).getTime() >
          new Date(this.$util.getTime(this.currentDate, 'ymd')).getTime()
        ) {
          this.$toast('结束时间不能小于开始时间')
          return
        }
        this.endTime = this.$util.getTime(this.currentDate, 'ymd')
      }

      this.selectTime = false
      this.initApi()
    },
  },
}
</script>
<style type="text/css" lang="less" scoped>
.staDisasterListWrap {
  background-repeat: no-repeat;

  background-size: cover;
  background-color: #fff;

  .backCity {
    position: absolute;
    top: 350px;
    right: 0px;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    background: #999;
    color: white;
    opacity: 0.5;
    border-radius: 50%;
    z-index: 1;
  }
  .staDistime {
    position: relative;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.08);
    padding: 10px;
    color: white;
    text-align: center;
    height: 45px;
    margin: 0 auto;
    font-weight: 400;
    color: #101010;

    .suntime {
      width: 345px;
      position: absolute;
      left: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 34px;
      background: #f5f5f5;
      border-radius: 17px;
      font-size: 14px;

      font-weight: 400;
      color: #101010;
      :nth-child(1) {
        margin-right: 40px;
      }
      :nth-child(2) {
        margin-left: 30px;
      }
    }
  }
  .tableHeader {
    background: white;
    padding: 10px;

    overflow: hidden;

    .thList {
      float: left;
      width: 16%;
      font-size: 13px;

      font-weight: 500;
      color: #101010;
      text-align: center;

      height: 30px;
      line-height: 30px;
    }
    .thListColor {
      width: 13%;
      span {
        border-radius: 100%;
        text-align: center;
        width: 30px;
        display: inline-block;
        box-sizing: border-box;
      }
    }
    .thListColorRed span {
      background: red;
      color: white;
    }
    .thListColorChen span {
      background: #f1832f;
      color: white;
    }
    .thListColorYellow span {
      background: #efb545;
      color: white;
    }
    .thListColorBlue span {
      background: #2302f0;
      color: white;
    }
  }
  .tableBody {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 144px;
    bottom: 0;
    height: 80%;
    overflow-y: auto;
    background: white;
    .tableDate {
      padding: 10px;
      color: #333;
      overflow: hidden;
      .tdList {
        float: left;
        width: 16%;
        text-align: center;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
      }
      .tdList.hasChild {
        text-decoration: underline;
      }
      .tdListColor {
        width: 13%;
      }
      .tdListColorRed span {
        color: red;
      }
      .tdListColorChen span {
        color: #f1832f;
      }
      .tdListColorYellow span {
        color: #efb545;
      }
      .tdListColorBlue span {
        color: #2302f0;
      }
    }
    .tableDate:nth-child(odd) {
      background: #f7f7f7;
    }
  }
}
/deep/ .van-nav-bar__content {
  background: #357cff;
}
</style>
